<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Language" content="en">
	<title>Bar Menu - Example 2 - MyGosuMenu</title>
    <script type="text/javascript" src="BarMenu.js"></script>
    <style type="text/css">
    body {
        background-color: #271D11;
    }
	body {
		font-family: tahoma; font-size: 13px;
		color: #eee;
    }
	a, a:visited { color: #fff; }
	h1 { font-size: 24px; }
    .bar-menu {
    }
    .bar-menu .box1 {
        background: url("images/button1.gif") no-repeat;
        color: #f9f9f9;
    }
    .bar-menu .box1-hover {
        background: url("images/button1.gif") no-repeat;
        color: #FFEBA9;
    }
    .bar-menu .box1-open {
        background: url("images/button1-click.gif") no-repeat;
        color: #f9f9f9;
    }
    .bar-menu .box1-open-hover {
        background: url("images/button1-click.gif") no-repeat;
        color: #FFEBA9;
    }
    .bar-menu .box1,
    .bar-menu .box1-hover,
    .bar-menu .box1-open,
    .bar-menu .box1-open-hover {
        text-indent: 12px;
        font-weight: bold;
        font-size: 14px;
        line-height: 31px;
        font-family: arial;
        cursor: pointer;
        width: 150px;
    }
    .bar-menu .section {
        background-color: #46351F;
        font-family: arial;
        font-size: 13px;
        line-height: 15px;
        padding: 0 0 5px 10px;
        display: none;
    }
    .bar-menu .section a {
        color: #ffffff;
        text-decoration: none;
        white-space: nowrap;
    }
    .bar-menu .section a:hover {
        color: #FFFF99;
        text-decoration: none;
        white-space: nowrap;
    }
    .bar-menu .box2 {
        border-color: #7B6139;
        border-width: 1px;
        border-style: none none solid solid;
        padding: 1px 0 2px 6px;
    }
    .bar-menu .box2-hover {
        border-color: #7B6139;
        border-width: 1px;
        border-style: none none solid solid;
        padding: 1px 0 2px 6px;
        background: #5B4529;
    }
    </style>
</head>
<body>

	<h1>Bar Menu - Example 2</h1>

	<p>
		Project: <a href="http://www.gosu.pl/MyGosuMenu/">MyGosuMenu</a> <br>
		Menu type: BarMenu
	</p>

    <script type="text/javascript">
    /* preload images, you can remove this code */
    var img = new Array();
    img[0] = new Image();
    img[0].src = "images/button1.gif";
    img[1] = new Image();
    img[1].src = "images/button1-click.gif";
    </script>

    <table><tr><td style="height: 500px; background-color: #46351F; vertical-align: top; padding: 10px;">

        <table cellspacing="0" cellpadding="0" id="bar-menu2" class="bar-menu">
        <tr>
            <td>
                <div class="box1">Products</div>
                <div class="section">
                    <div class="box2"><a href="example2.html">Product One</a></div>
                    <div class="box2"><a href="example2.html">Product Two</a></div>
                    <div class="box2"><a href="example2.html">Product Three</a></div>
                    <div class="box2"><a href="example2.html">Product Four</a></div>
                    <div class="box2"><a href="example2.html">Product Five</a></div>
                </div>
            </td>
        </tr>
        <tr><td height="8"></td></tr>
        <tr>
            <td>
                <div class="box1">Partners</div>
                <div class="section">
                    <div class="box2"><a href="example2.html">Partner Benefits</a></div>
                    <div class="box2"><a href="example2.html">Partner Application</a></div>
                    <div class="box2"><a href="example2.html">Partner Listing</a></div>
                </div>
            </td>
        </tr>
        <tr><td height="8"></td></tr>
        <tr>
            <td>
                <div class="box1">Customers</div>
                <div class="section">
                    <div class="box2"><a href="example2.html">Customer One</a></div>
                    <div class="box2"><a href="example2.html">Customer Two</a></div>
                    <div class="box2"><a href="example2.html">Customer Three</a></div>
                    <div class="box2"><a href="example2.html">Customer Four</a></div>
                    <div class="box2"><a href="example2.html">Customer Five</a></div>
                    <div class="box2"><a href="example2.html">Customer Six</a></div>
                    <div class="box2"><a href="example2.html">Customer Seven</a></div>
                </div>
            </td>
        </tr>
        <tr><td height="8"></td></tr>
        <tr>
            <td>
                <div class="box1">About Us</div>
                <div class="section">
                    <div class="box2"><a href="example2.html">Executive Team</a></div>
                    <div class="box2"><a href="example2.html">Investors</a></div>
                    <div class="box2"><a href="example2.html">Career</a></div>
                    <div class="box2"><a href="example2.html">Press Center</a></div>
                    <div class="box2"><a href="example2.html">Success Stories</a></div>
                    <div class="box2"><a href="example2.html">Contact Us</a></div>
                </div>
            </td>
        </tr>
        </table>

    </td></tr></table>

    <script type="text/javascript">
    var barMenu2 = new BarMenu('bar-menu2');
    barMenu2.init();
    </script>

</body>
</html>